<template>
    <div>
        <div class="seat_content">
            <div class="seat_header">
                <div class="seat_header_title">座位视图</div>
                <div class="seat_header_but">
                    <button @click="TZ_Dingdan()" class="QueDing">确定</button>
                    <button @click="TZ_1()" class="seat_header_but_1">一层大厅</button>
                    <button @click="TZ_2()" class="seat_header_but_2">二层包间</button>
                </div> 

            </div>       
        </div>
        <!-- 第一排桌子 -->
        <div class="first">
            <!-- A1 4人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
                <div class="first_div1">
                    <button class="first_but" @click="A1('A1')" :style="buttonStyle_A1">A1</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
            </div>
            <!-- A2 2人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>      
                </div>
                <div class="first_div2">
                    <button class="first_but" @click="A2('A2')" :style="buttonStyle_A2">A2</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>  
                </div>
            </div>
            <!-- A3 6人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
                <div class="first_div3">
                    <button class="first_but" @click="A3('A3')" :style="buttonStyle_A3">A3</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
            </div>
            <!-- A4 2人桌 -->
            <div class="first_div">
                    <div class="ZuoWei">
                        <div class="ZuoWei_div"></div>      
                    </div>
                    <div class="first_div4">
                        <button class="first_but" @click="A4('A4')" :style="buttonStyle_A4">A4</button>
                    </div>
                    <div class="ZuoWei">
                        <div class="ZuoWei_div"></div>  
                    </div>
                </div>
            
            <!-- A5 4人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
                <div class="first_div5">
                    <button class="first_but" @click="A5('A5')" :style="buttonStyle_A5">A5</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
            </div>
            
        </div>
        <!-- 第二排桌子 -->
        <div class="second">
            <!-- A6 2人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>      
                </div>
                <div class="first_div2">
                    <button class="first_but" @click="A6('A6')" :style="buttonStyle_A6">A6</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>  
                </div>
            </div>
            <!-- A7 4人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
                <div class="first_div1">
                    <button class="first_but"  @click="A7('A7')" :style="buttonStyle_A7">A7</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                <div class="ZuoWei_div"></div>
                </div>
            </div>
            <!-- A8 2人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>      
                </div>
                <div class="first_div2">
                    <button class="first_but"  @click="A8('A8')" :style="buttonStyle_A8">A8</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>  
                </div>
            </div>
            <!-- A9 6人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
                <div class="first_div3">
                    <button class="first_but"  @click="A9('A9')" :style="buttonStyle_A9">A9</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
            </div>
            <!-- A10 4人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
                <div class="first_div1">
                    <button class="first_but"  @click="A10('A10')" :style="buttonStyle_A10">A10</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                <div class="ZuoWei_div"></div>
                </div>
            </div>
        </div>
        <!-- 第三排桌子 -->
        <div class="third">
            <!-- A11 4人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
                <div class="first_div1">
                    <button class="first_but"  @click="A11('A11')" :style="buttonStyle_A11">A11</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
            </div>
            <!-- A12 6人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
                <div class="first_div3">
                    <button class="first_but"  @click="A12('A12')" :style="buttonStyle_A12">A12</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
            </div>
            <!-- A13 2人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>      
                </div>
                <div class="first_div2">
                    <button class="first_but"  @click="A13('A13')" :style="buttonStyle_A13">A13</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>  
                </div>
            </div>
            <!-- A14 4人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                    <div class="ZuoWei_div"></div>
                </div>
                <div class="first_div1">
                    <button class="first_but"  @click="A14('A14')" :style="buttonStyle_A14">A14</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>
                <div class="ZuoWei_div"></div>
                </div>
            </div>
            <!-- A15 2人桌 -->
            <div class="first_div">
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>      
                </div>
                <div class="first_div2">
                    <button class="first_but"  @click="A15('A15')" :style="buttonStyle_A15">A15</button>
                </div>
                <div class="ZuoWei">
                    <div class="ZuoWei_div"></div>  
                </div>
            </div>

        </div>

        <div class="choose">
            <div class="choose_1">
                <div class="choose_1_div1">可选：</div>
                <div class="choose_1_div2"></div>
            </div>
            <div class="choose_2">
                <div  class="choose_2_div1">就餐：</div>
                <div  class="choose_2_div2"></div>
            </div>
            <div class="choose_3">
                <div  class="choose_3_div1">预定：</div>
                <div  class="choose_3_div2"></div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref,onMounted,watchEffect } from 'vue';
import {useRouter} from 'vue-router'
const router=useRouter()
let index1=ref(0)
let index2=ref(0)
let index3=ref(0)
let index4=ref(0)
let index5=ref(0)
let index6=ref(0)
let index7=ref(0)
let index8=ref(0)
let index9=ref(0)
let index10=ref(0)
let index11=ref(0)
let index12=ref(0)
let index13=ref(0)
let index14=ref(0)
let index15=ref(0)

const buttonStyle_A1 = ref([]);
const buttonStyle_A2 = ref([]);
const buttonStyle_A3 = ref([]);
const buttonStyle_A4 = ref([]);
const buttonStyle_A5 = ref([]);
const buttonStyle_A6 = ref([]);
const buttonStyle_A7 = ref([]);
const buttonStyle_A8 = ref([]);
const buttonStyle_A9 = ref([]);
const buttonStyle_A10 = ref([]);
const buttonStyle_A11 = ref([]);
const buttonStyle_A12 = ref([]);
const buttonStyle_A13 = ref([]);
const buttonStyle_A14 = ref([]);
const buttonStyle_A15 = ref([]);

onMounted(()=>{
    const A1=localStorage.getItem('A1');
    if (A1) {
        buttonStyle_A1.value = JSON.parse(A1);
    }

    const A2=localStorage.getItem('A2');
    if (A2) {
        buttonStyle_A2.value = JSON.parse(A2);
    }

    const A3= localStorage.getItem('A3');
    if (A3) {
        buttonStyle_A3.value = JSON.parse(A3);
    }

    const A4= localStorage.getItem('A4');
    if (A4) {
        buttonStyle_A4.value = JSON.parse(A4);
    }

    const A5= localStorage.getItem('A5');
    if (A5) {
        buttonStyle_A5.value = JSON.parse(A5);
    }

    const A6=localStorage.getItem('A6');
    if (A6) {
        buttonStyle_A6.value = JSON.parse(A6);
    }

    const A7=localStorage.getItem('A7');
    if (A7) {
        buttonStyle_A7.value = JSON.parse(A7);
    }

    const A8= localStorage.getItem('A8');
    if (A8) {
        buttonStyle_A8.value = JSON.parse(A8);
    }

    const A9= localStorage.getItem('A9');
    if (A9) {
        buttonStyle_A9.value = JSON.parse(A9);
    }

    const A10= localStorage.getItem('A10');
    if (A10) {
        buttonStyle_A10.value = JSON.parse(A10);
    }


    const A11=localStorage.getItem('A11');
    if (A11) {
        buttonStyle_A11.value = JSON.parse(A11);
    }

    const A12=localStorage.getItem('A12');
    if (A12) {
        buttonStyle_A12.value = JSON.parse(A12);
    }

    const A13= localStorage.getItem('A13');
    if (A13) {
        buttonStyle_A13.value = JSON.parse(A13);
    }

    const A14= localStorage.getItem('A14');
    if (A14) {
        buttonStyle_A14.value = JSON.parse(A14);
    }

    const A15= localStorage.getItem('A15');
    if (A15) {
        buttonStyle_A15.value = JSON.parse(A15);
    }
})


const Num=ref(0)
//跳转餐厅区域
function TZ_1(){
  router.push('/seat/content1')
  Num.value=0
}
function TZ_2(){
  router.push('/seat/content2')
  Num.value=1
}
//跳回订单页面
function TZ_Dingdan(){
    router.push({
        path:"/createOrder",
    
    })

    localStorage.setItem('tableorder',JSON.stringify(tableorder.value))
    localStorage.setItem('index',JSON.stringify(1))
}

//跳转餐厅区域
function TZ_3(){
  router.push('/seat/content3')
  Num.value=2
}
function TZ_4(){
  router.push('/seat/content4')
  Num.value=3
}
function TZ_5(){
  router.push('/seat/content5')
  Num.value=4
  
}

const   tableorder=ref('')

function A1(i:string){
    index1.value+=1
    tableorder.value=i
    localStorage.setItem('tableOrder',JSON.stringify(i))
    if(index1.value==0){
        localStorage.setItem('A1',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index1.value==1){
        localStorage.setItem('A1',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index1.value==2){
        localStorage.setItem('A1',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index1.value=-1
    }
    watchEffect(()=>{
        const A1= localStorage.getItem('A1');
        if (A1) {
            buttonStyle_A1.value=JSON.parse(localStorage.getItem('A1')as string) 
        }
    })
}

function A2(i:string){
    index2.value+=1
    tableorder.value=i

    if(index2.value==0){
        localStorage.setItem('A2',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index2.value==1){
        localStorage.setItem('A2',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index2.value==2){
        localStorage.setItem('A2',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index2.value=-1
    }
    watchEffect(()=>{
        const A2= localStorage.getItem('A2');
        if (A2) {
            buttonStyle_A2.value=JSON.parse(localStorage.getItem('A2')as string) 
        }
    })
}

function A3(i:string){
    index3.value+=1
    tableorder.value=i
    console.log(tableorder.value);

    if(index3.value==0){
        localStorage.setItem('A3',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index3.value==1){
        localStorage.setItem('A3',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index3.value==2){
        localStorage.setItem('A3',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index3.value=-1
    }
    watchEffect(()=>{ 
        const A3= localStorage.getItem('A3');
        if (A3) {
            buttonStyle_A3.value=JSON.parse(localStorage.getItem('A3')as string) 
        }
    })
}

function A4(i:string){
    index4.value+=1
    tableorder.value=i
    if(index4.value==0){
        localStorage.setItem('A4',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index4.value==1){
        localStorage.setItem('A4',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index4.value==2){
        localStorage.setItem('A4',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index4.value=-1
    }
    watchEffect(()=>{ 
        const A4= localStorage.getItem('A4');
        if (A4) {
            buttonStyle_A4.value=JSON.parse(localStorage.getItem('A4')as string) 
        }
    })
}

function A5(i:string){
    index5.value+=1
    tableorder.value=i

    if(index5.value==0){
        localStorage.setItem('A5',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index5.value==1){
        localStorage.setItem('A5',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index5.value==2){
        localStorage.setItem('A5',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index5.value=-1
    }
    watchEffect(()=>{ 
        const A5= localStorage.getItem('A5');
        if (A5) {
            buttonStyle_A5.value=JSON.parse(localStorage.getItem('A5')as string) 
        }
    })
}

function A6(i:string){
    index6.value+=1
    tableorder.value=i

    if(index6.value==0){
        localStorage.setItem('A6',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index6.value==1){
        localStorage.setItem('A6',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index6.value==2){
        localStorage.setItem('A6',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index6.value=-1
    }
    watchEffect(()=>{ 
        const A6= localStorage.getItem('A6');
        if (A6) {
            buttonStyle_A6.value=JSON.parse(localStorage.getItem('A6')as string) 
        }
    })
}

function A7(i:string){
    index7.value+=1
    tableorder.value=i

    if(index7.value==0){
        localStorage.setItem('A7',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index7.value==1){
        localStorage.setItem('A7',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index7.value==2){
        localStorage.setItem('A7',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index7.value=-1
    }
    watchEffect(()=>{ 
        const A7= localStorage.getItem('A7');
        if (A7) {
            buttonStyle_A7.value=JSON.parse(localStorage.getItem('A7')as string) 
        }
    })
}

function A8(i:string){
    index8.value+=1
    tableorder.value=i
    if(index8.value==0){
        localStorage.setItem('A8',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index8.value==1){
        localStorage.setItem('A8',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index8.value==2){
        localStorage.setItem('A8',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index8.value=-1
    }
    watchEffect(()=>{ 
        const A8= localStorage.getItem('A8');
        if (A8) {
            buttonStyle_A8.value=JSON.parse(localStorage.getItem('A8')as string) 
        }
    })
}

function A9(i:string){
    index9.value+=1
    tableorder.value=i
    if(index9.value==0){
        localStorage.setItem('A9',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index9.value==1){
        localStorage.setItem('A9',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index9.value==2){
        localStorage.setItem('A9',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index9.value=-1
    }
    watchEffect(()=>{ 
        const A9= localStorage.getItem('A9');
        if (A9) {
            buttonStyle_A9.value=JSON.parse(localStorage.getItem('A9')as string) 
        }
    })
}

function A10(i:string){
    index10.value+=1
    tableorder.value=i
    if(index10.value==0){
        localStorage.setItem('A10',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index10.value==1){
        localStorage.setItem('A10',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index10.value==2){
        localStorage.setItem('A10',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index10.value=-1
    }
    watchEffect(()=>{ 
        const A10= localStorage.getItem('A10');
        if (A10) {
            buttonStyle_A10.value=JSON.parse(localStorage.getItem('A10')as string) 
        }
    })
}

function A11(i:string){
    index11.value+=1
    tableorder.value=i
    if(index11.value==0){
        localStorage.setItem('A11',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index11.value==1){
        localStorage.setItem('A11',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index11.value==2){
        localStorage.setItem('A11',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index11.value=-1
    }
    watchEffect(()=>{ 
        const A11= localStorage.getItem('A11');
        if (A11) {
            buttonStyle_A11.value=JSON.parse(localStorage.getItem('A11')as string) 
        }
    })
}

function A12(i:string){
    index12.value+=1
    tableorder.value=i
    if(index12.value==0){
        localStorage.setItem('A12',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index12.value==1){
        localStorage.setItem('A12',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index12.value==2){
        localStorage.setItem('A12',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index12.value=-1
    }
    watchEffect(()=>{ 
        const A12= localStorage.getItem('A12');
        if (A12) {
            buttonStyle_A12.value=JSON.parse(localStorage.getItem('A12')as string) 
        }
    })
}
function A13(i:string){
    index13.value+=1
    tableorder.value=i
    if(index13.value==0){
        localStorage.setItem('A13',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index13.value==1){
        localStorage.setItem('A13',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index13.value==2){
        localStorage.setItem('A13',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index13.value=-1
    }
    watchEffect(()=>{ 
        const A13= localStorage.getItem('A13');
        if (A13) {
            buttonStyle_A13.value=JSON.parse(localStorage.getItem('A13')as string) 
        }
    })
}

function A14(i:string){
    index14.value+=1
    tableorder.value=i
    if(index14.value==0){
        localStorage.setItem('A14',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index14.value==1){
        localStorage.setItem('A14',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index14.value==2){
        localStorage.setItem('A14',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index14.value=-1
    }
    watchEffect(()=>{ 
        const A14= localStorage.getItem('A14');
        if (A14) {
            buttonStyle_A14.value=JSON.parse(localStorage.getItem('A14')as string) 
        }
    })
}

function A15(i:string){
    index15.value+=1
    tableorder.value=i
    if(index15.value==0){
        localStorage.setItem('A15',JSON.stringify({background: '#fa8ea4', color: '#fff'}))
    }
    if(index15.value==1){
        localStorage.setItem('A15',JSON.stringify({background: '#8beaf8', color: '#596769'}))   
    }
    if(index15.value==2){
        localStorage.setItem('A15',JSON.stringify({background: '#E8E8E8', color: '#000'}))
        index15.value=-1
    }
    watchEffect(()=>{ 
        const A15= localStorage.getItem('A15');
        if (A15) {
            buttonStyle_A15.value=JSON.parse(localStorage.getItem('A15')as string) 
        }
    })
}
  
  
   

</script>

<style scoped lang="less">
//座位样式 ---------------------------------------------------
.seat_content{
    width: 100%;
    background-color: #F5F5F5;
    .seat_header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        // border: 1px solid red;
        .seat_header_title{
            font-size: 30px;
            margin-top: 20px;
            margin-left: 20px;
            margin-bottom: 20px;
            font-weight: bold;
        }
        .seat_header_but{
            display: flex;
            justify-content: space-between;
            width: 320px;
            // border: 1px solid #000;
            margin-right: 40px;
            .QueDing{
                width: 100px;
                height: 50px;
                background-color: #fff;
                border: 1px solid #fff;
                border-radius: 10px;
                font-size: 20px;
                cursor: pointer;  
            }
            .seat_header_but_1{
                width: 100px;
                height: 50px;
                background-color: #fff;
                border: 1px solid #fff;
                border-radius: 10px;
                font-size: 20px;
                cursor: pointer;           
            }
            .seat_header_but_2{
                width: 100px;
                height: 50px;
                background-color: #fff;
                border: 1px solid #fff;
                border-radius: 10px;
                font-size: 20px;
                cursor: pointer;
            }
        }
    }
            
}
.active{
    width: 100px;
    height: 50px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;  
    background-color: #DCEEFE;
    color:#2A77D3;
}

.first{
    width: 100%;
    display: flex;
    justify-content: space-around;
    // border: 1px solid #000;
}
.second{
    width: 100%;
    display: flex;
    justify-content: space-around;
    // border: 1px solid #000;
    margin-top: 50px;
}
.third{
    width: 100%;
    display: flex;
    justify-content: space-around;
    // border: 1px solid #000;
    margin-top: 50px;
}

//一个桌子的最外侧
.first_div{
    margin-top: 10px;
    // border: 1px solid #000;
}
.first_div1{
    width: 200px;
    height: 100px;
    border: 1px solid #fff;
    background-color: #FFFFFF;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;   
}
.first_div2{
    width: 100px;
    height: 100px;
    border: 1px solid #fff;
    background-color: #FFFFFF;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px; 
    
}
.first_div3{
    width: 300px;
    height: 100px;
    border: 1px solid #fff;
    background-color: #FFFFFF;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px; 
}
.first_div4{
    width: 100px;
    height: 100px;
    border: 1px solid #fff;
    background-color: #FFFFFF;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px; 
}
.first_div5{
    width: 200px;
    height: 100px;
    border: 1px solid #fff;
    background-color: #FFFFFF;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px; 
}
//桌号按钮
.first_but{
    width: 50px;
    height: 50px;
    border: 1px solid #E8E8E8;
    background-color: #E8E8E8;
    color:#000;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px 0px #000000;
}

.ZuoWei{
    display: flex;
    justify-content: space-around;
}
.ZuoWei_div{
    width: 60px;
    height: 20px;
    border: 1px solid #fff;
    background-color: #FFFFFF;
    border-radius: 8px;
}
//可选
.choose{
    width: 400px;
    height: 50px;
    // border: 1px solid #000;
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    border-radius:10px;
    margin-left: 45px;;
    .choose_1{
        width: 100px;
        // border: 1px solid #000;
        display: flex;
        .choose_1_div1{
            width: 60px;
            height: 24px;
            // border: 1px solid #342e2e;
            text-align: right;
        }
        .choose_1_div2{
            width: 24px;
            height: 24px;
            // border: 1px solid #000;
            background-color: #E8E8E8;
        }
       
    }
    .choose_2{
        width: 100px;
        // border: 1px solid #000;
        display: flex;
        .choose_2_div1{
            width: 60px;
            height: 24px;
            // border: 1px solid #342e2e;
            text-align: right;
        }
        .choose_2_div2{
            width: 24px;
            height: 24px;
            // border: 1px solid #000;
            background-color: #8beaf8;
        }
    }
    .choose_3{
        width: 100px;
        // border: 1px solid #000;
        display: flex;
        .choose_3_div1{
            width: 60px;
            height: 24px;
            // border: 1px solid #342e2e;
            text-align: right;
        }
        .choose_3_div2{
            width: 24px;
            height: 24px;
            // border: 1px solid #000;
            background-color: #fa8ea4;
        }
    }

}


</style>